<!DOCTYPE html>
<html>
<head>
<title>BootStrappin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<style type="text/css">
	.clearfix:after {
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}
	 
	.clearfix {
		display: inline-block;
	}
	 
	html[xmlns] .clearfix {
		display: block;
	}
	 
	* html .clearfix {
		height: 1%;
	}

	body {
		padding-top:40px;
		padding-bottom:40px;
		background-color:#f5f5f5;
	}

	.form-entry {
		max-width:724px;
		margin: 0 auto 20px;
		background-color:#FFF;
		border:1px solid #e5e5e5;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
		border-radius:5px;
		-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);
		-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);
		box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);
	}
	
	.form-entry .form-entry-heading {
		margin-bottom:10px;
		text-align:center;
	}
	
	input {
		float:right;
		width:50px;
	}
	
	label {
		text-align:center;
		vertical-align:middle;
	}
	.row {
		margin-left:10px;
		margin-right:10px;
	}
	.section {
		padding: 10px;
		margin-bottom:20px;
		background:#F66;
		border:1px solid #e5e5e5;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
		border-radius:5px;
		-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);
		-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);
		box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);
	}
	
	.incbutton {
		width:40px;
		height:30px;
		background:#999;
		border:1px solid #e5e5e5;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
		border-radius:5px;
		float:right;
		vertical-align:middle;
		-webkit-user-select: none;  /* Chrome all / Safari all */
  		-moz-user-select: none;     /* Firefox all */
  		-ms-user-select: none;      /* IE 10+ */
	}
	
	.decbutton {
		float:left;
	}
	
	.countLabel {
		float:left;
		margin-left:20px;
		margin-right:20px;
		font-size:24px;
	}
</style>

</head>

<body>
	<div class="container">
    	<form class="form-entry">
        	<h2 class="form-entry-heading">Scouting Form</h2>
            <div class="section row">
            	Autonomous Points<br>
                <div class="row ">
                  	<div class="incrementer clearfix">
                    	<label class="incbutton" id="incBtn" onClick="inc('auto')">+</label>
       			 		<label class="incbutton decbutton" id="incBtn" onClick="dec('auto')">-</label>
                        <div class="countLabel" id="auto">0</div>
    				</div>
            	</div>
            </div>
        </form>
    </div>
    
    <script language="javascript">
			function inc(name)
			{
				var ele = document.getElementById(name);
				element_number = parseFloat(ele.innerHTML);
				element_number++;
				ele.innerHTML = element_number;
			}
			
			function dec(name)
			{
				var ele = document.getElementById(name);
				element_number = parseFloat(ele.innerHTML);
				if(element_number > 0) {
					element_number--;
				}
				ele.innerHTML = element_number;
				
			}
		</script>
</body>
</html>
